<template>
  <div class="">
    <!--  //头部-->
    <el-form
        :inline="true"
        :model="selectByForm"
        class="advanced-form"
        label-position="right"
    >
      <el-row :gutter="20" class="form-row">
        <!-- 第一行 -->
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="姓名" class="form-item">
            <el-input
                v-model="selectByForm.ownerName"
                placeholder="请输入真实姓名"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            />
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="资产" class="form-item">
            <el-input
                v-model="selectByForm.name"
                placeholder="请输入资产名称"
                clearable
                class="form-input"
                @focus="handleFocus($event)"
                @blur="handleBlur($event)"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="类型" class="form-item">
            <el-select
                v-model="selectByForm.assetType"
                placeholder="请选择资产类型"
                clearable
                style="width: 100%"
            >
              <el-option label="机械" value="machinery"/>
              <el-option label="养殖设施" value="breeding_facility"/>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" class="form-col">
          <el-form-item label="状态" class="form-item">
            <el-select
                v-model="selectByForm.isAvailable"
                placeholder="请选择状态"
                clearable
                style="width: 100%"
            >
              <el-option label="忙碌" value="0"/>
              <el-option label="空闲" value="1"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 操作按钮（单独一行） -->
      <el-row>
        <el-col :span="24" class="form-actions">
          <el-button type="primary" @click="onSelect" icon="el-icon-search">查询</el-button>
          <el-button
              type="success"
              @click="toAdd"
              icon="el-icon-plus"
              plain
          >新增
          </el-button>
        </el-col>
      </el-row>
    </el-form>

    <!--  列表页  -->
    <el-table :data="tableData"
              style="width: 100%"
              :header-cell-style="{background: '#f5f7fa', color: '#606266'}"
              stripe
              highlight-current-row
              @current-change="toShow"
              border
    >
      <el-table-column prop="ownerName" label="提供者" width="180" align="center"></el-table-column>
      <el-table-column prop="name" label="名称" width="180" align="center"></el-table-column>
      <el-table-column prop="assetType" label="类型" width="180" align="center">
        <template slot-scope="scope">
          {{ assetTypeMap[scope.row.assetType] || '未知类型' }}
        </template>
      </el-table-column>
      <el-table-column prop="maintenanceStatus" label="维护状态" width="180" align="center">
        <template slot-scope="scope">
          {{ mainStatus[scope.row.maintenanceStatus] || '未填写' }}
        </template>
      </el-table-column>
      <el-table-column prop="isAvailable" label="状态" width="220" align="center">
        <template slot-scope="scope">
          {{ AvailableMap[scope.row.isAvailable] || '未填写' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" align="center" >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="toUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" icon="el-icon-delete" @click="toDel(scope.row.assetId)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <!--    页脚-->
    <el-pagination
        background
        :page-size="pageSize"
        :current-page="pageNum"
        :page-count="pages"
        layout="prev, pager, next"
        :total="total"
        @current-change="changePageNum"
    >
    </el-pagination>

    <!--    弹窗，实现新增信息-->
    <el-dialog
        title="新增农业资产"
        :visible.sync="addDialog"
        width="800px"
        :close-on-click-modal="false"
        class="asset-dialog"
    >
      <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="120px"
          label-position="left"
          class="asset-form"
      >
        <el-row :gutter="30">
          <!-- 第一列 - 基本信息 -->
          <el-col :span="12">
            <div class="form-section">
              <h4 class="section-title"><i class="el-icon-info"></i> 基本信息</h4>

              <el-form-item label="资产类型" prop="assetType">
                <el-select
                    v-model="form.assetType"
                    placeholder="请选择资产类型"
                    style="width:100%"
                >
                  <el-option label="机械设备" value="machinery"></el-option>
                  <el-option label="养殖设施" value="breeding_facility"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="资产名称" prop="name">
                <el-input
                    v-model="form.name"
                    placeholder="请输入资产名称"
                    clearable
                ></el-input>
              </el-form-item>

              <el-form-item label="购买日期" prop="purchaseDate">
                <el-date-picker
                    v-model="form.purchaseDate"
                    type="date"
                    placeholder="选择日期"
                    style="width:100%"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="所有者姓名" prop="ownerName">
                <el-input
                    v-model="form.ownerName"
                    placeholder="请输入所有者姓名"
                    clearable
                ></el-input>
              </el-form-item>
            </div>
          </el-col>

          <!-- 第二列 - 状态信息 -->
          <el-col :span="12">
            <div class="form-section">
              <h4 class="section-title"><i class="el-icon-setting"></i> 状态信息</h4>

              <el-form-item label="当前估值(元)" prop="currentValue">
                <el-input-number
                    v-model="form.currentValue"
                    :precision="2"
                    :min="0"
                    :controls="false"
                    style="width:100%"
                ></el-input-number>
              </el-form-item>

              <el-form-item label="维护状态" prop="maintenanceStatus">
                <el-select
                    v-model="form.maintenanceStatus"
                    placeholder="请选择维护状态"
                    style="width:100%"
                >
                  <el-option label="正常" value="normal"></el-option>
                  <el-option label="维修中" value="repairing"></el-option>
                  <el-option label="已报废" value="scrapped"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="上次维护日期" prop="lastMaintenanceDate">
                <el-date-picker
                    v-model="form.lastMaintenanceDate"
                    type="date"
                    placeholder="选择日期"
                    style="width:100%"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="下次维护日期" prop="nextMaintenanceDate">
                <el-date-picker
                    v-model="form.nextMaintenanceDate"
                    type="date"
                    placeholder="选择日期"
                    style="width:100%"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <!-- 规格描述 -->
        <div class="form-section">
          <h4 class="section-title"><i class="el-icon-document"></i> 规格描述</h4>
          <el-form-item prop="specifications">
            <el-input
                v-model="form.specifications"
                type="textarea"
                :rows="3"
                placeholder="请输入详细规格参数"
            ></el-input>
          </el-form-item>
          <!-- 可用状态 -->
          <el-form-item>
            <h4 class="section-title"><i class="el-icon-document"></i> 当前状态</h4>
            <el-select v-model="form.isAvailable"
                       placeholder="请选择状态"
                       style="width:100%">
              <el-option label="空闲" value="1"></el-option>
              <el-option label="忙碌" value="0"></el-option>
            </el-select>
          </el-form-item>
        </div>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false" size="medium">取 消</el-button>
        <el-button
            type="primary"
            @click="addForm('form')"
            size="medium"
            :loading="submitting"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>

    <!--    弹窗，实现修改信息-->
    <el-dialog
        title="修改农业资产"
        :visible.sync="updateDialog"
        width="800px"
        :close-on-click-modal="false"
        class="asset-dialog"
    >
      <el-form
          :model="form"
          :rules="rules"
          ref="form"
          label-width="120px"
          label-position="left"
          class="asset-form"
      >
        <el-row :gutter="30">
          <!-- 第一列 - 基本信息 -->
          <el-col :span="12">
            <div class="form-section">
              <h4 class="section-title"><i class="el-icon-info"></i> 基本信息</h4>

              <el-form-item label="资产类型" prop="assetType">
                <div style="border-bottom:1px solid #aaaaaa">
                  {{assetTypeMap[form.assetType]}}
                </div>
              </el-form-item>

              <el-form-item label="资产名称" prop="name">
                <div style="border-bottom:1px solid #aaaaaa">
                  {{ form.name }}
                </div>
              </el-form-item>

              <el-form-item label="购买日期" prop="purchaseDate">
                <el-date-picker
                    v-model="form.purchaseDate"
                    type="date"
                    placeholder="选择日期"
                    style="width:100%"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="所有者姓名" prop="ownerName">
                <el-input
                    v-model="form.ownerName"
                    placeholder="请输入所有者姓名"
                    clearable
                ></el-input>
              </el-form-item>
            </div>
          </el-col>

          <!-- 第二列 - 状态信息 -->
          <el-col :span="12">
            <div class="form-section">
              <h4 class="section-title"><i class="el-icon-setting"></i> 状态信息</h4>

              <el-form-item label="当前估值(元)" prop="currentValue">
                <el-input-number
                    v-model="form.currentValue"
                    :precision="2"
                    :min="0"
                    :controls="false"
                    style="width:100%"
                ></el-input-number>
              </el-form-item>

              <el-form-item label="维护状态" prop="maintenanceStatus">
                <el-select
                    v-model="form.maintenanceStatus"
                    placeholder="请选择维护状态"
                    style="width:100%"
                >
                  <el-option label="正常" value="normal"></el-option>
                  <el-option label="维修中" value="repairing"></el-option>
                  <el-option label="已报废" value="scrapped"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="上次维护日期" prop="lastMaintenanceDate">
                <el-date-picker
                    v-model="form.lastMaintenanceDate"
                    type="date"
                    placeholder="选择日期"
                    style="width:100%"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>

              <el-form-item label="下次维护日期" prop="nextMaintenanceDate">
                <el-date-picker
                    v-model="form.nextMaintenanceDate"
                    type="date"
                    placeholder="选择日期"
                    style="width:100%"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
            </div>
          </el-col>
        </el-row>

        <!-- 规格描述 -->
        <div class="form-section">
          <h4 class="section-title"><i class="el-icon-document"></i> 规格描述</h4>
          <el-form-item prop="specifications">
            <el-input
                v-model="form.specifications"
                type="textarea"
                :rows="3"
                placeholder="请输入详细规格参数"
            ></el-input>
          </el-form-item>
          <!-- 可用状态 -->
          <el-form-item>
            <h4 class="section-title"><i class="el-icon-document"></i> 当前状态</h4>
            <el-select v-model="form.isAvailable"
                       placeholder="请选择状态"
                       style="width:100%">
              <el-option label="空闲" value="1"></el-option>
              <el-option label="忙碌" value="0"></el-option>
            </el-select>
          </el-form-item>
        </div>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false" size="medium">取 消</el-button>
        <el-button
            type="primary"
            @click="updateForm('form')"
            size="medium"
            :loading="submitting"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import {deleteAssetsApi, getAssetsPage, saveAssetsApi, updateAssetsApi} from "@/api/assets";

export default {
  name: "AssetsManageView",
  data() {
    return {
      //筛选表单
      selectByForm: {
        ownerName: '',
        isAvailable: '',
        name: '',
        assetType: ''
      },
      //列表数据
      tableData: '',
      //页脚
      pages: 0,
      total: 1,
      pageNum: 1,
      pageSize: 6,
      //类型
      assetTypeMap: {
        machinery: '机械',
        breeding_facility: '养殖设施'
      },
      //维修状态
      mainStatus: {
        normal: '正常',
        repairing: '维修中',
        scrapped: '已报废'
      },
      //可用状态
      AvailableMap: {
        1: '空闲',
        0: '忙碌'
      },
      //弹窗 默认值
      addDialog: false,
      updateDialog:false,
      form: {
        assetType: '',
        name: '',
        specifications: '',
        purchaseDate: '',
        ownerName: '',
        currentValue: null,
        isAvailable: '1',
        maintenanceStatus: 'normal',
        lastMaintenanceDate: '',
        nextMaintenanceDate: ''
      },
      rules: {
        assetType: [
          { required: true, message: '请选择资产类型', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入资产名称', trigger: 'blur' }
        ],
        ownerName: [
          { required: true, message: '请输入所有者姓名', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {

    //获取删除id
    toDel(id) {
      console.log(id)
      this.$confirm(`确定删除此条信息吗？`, '提示', {
        type: 'danger'
      }).then(() => {
        // 这里调用API更新状态
        deleteAssetsApi(id)
        this.getPage()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('取消删除')
      })
    },

    //打开更新弹窗
    toUpdate(row) {
      this.updateDialog = true
      this.form = row
    },

    //修改函数
    updateForm(form){
      //判断
      this.$refs[form].validate((valid) => {
        if(valid){
          updateAssetsApi(this.form).then(()=>{
            this.getPage()
            this.updateDialog = false
          })
        }
      });
      this.form = {}
    },

    //打开新增弹窗
    toAdd(){
      this.form = {}
      this.addDialog = true
    },

    //添加函数
    addForm(form){
      //判断函数
      this.$refs[form].validate((valid) => {
        if(valid){
          saveAssetsApi(this.form).then(()=>{
            this.getPage()
            this.addDialog = false
          })
        }
      });
    },
    //查询
    onSelect() {
      this.pageNum = 1
      this.getPage()
    },

    //获取页面数据
    getPage() {
      getAssetsPage(this.selectByForm, this.pageNum, this.pageSize).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list
          this.pages = res.data.pages
          this.total = res.data.total
          this.pageNum = res.data.pageNum
          this.pageSize = res.data.pageSize
        }
      })
    },
    //直接选择第几页
    changePageNum(v) {
      console.log(v + '')
      this.pageNum = v
      this.getPage()
    },
  },
  created() {
    this.getPage()
  }
}
</script>

<style scoped>

.form-actions {
  text-align: right;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
}
/* 表单行样式 */
.form-row {
  margin-bottom: 15px;
}

/* 表单列样式 */
.form-col {
  margin-bottom: 10px;
  padding: 0 10px;
}

/* 表单项样式 */
.form-item {
  margin-bottom: 0;
}

/* 输入框样式 */
.form-input {
  width: 100%;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .form-col {
    padding: 0 5px;
  }
}

/* 弹窗整体样式 */
.asset-dialog {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 表单样式 */
.asset-form {
  padding: 0 20px;
}

/* 表单区块样式 */
.form-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9fafc;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
}

/* 区块标题样式 */
.section-title {
  margin: 0 0 15px 0;
  color: #409EFF;
  font-size: 16px;
  font-weight: 500;
}

.section-title i {
  margin-right: 8px;
}


/* 按钮区域样式 */
.dialog-footer {
  text-align: right;
  padding: 15px 20px;
  border-top: 1px solid #ebeef5;
}
</style>

